<template>
  <view class="ver-layout">
    <view class="card-layout">
      <view class="hor-layout-center card-item">
        <view>uuid：</view>
        <view class="value-view">{{ systemInfo.deviceId }}</view>
        <button size="mini" @click="copyText">复制</button>
      </view>
      <view class="divider-line"></view>
      <view class="hor-layout-center card-item">
        <view>剩余次数：</view>
        <view class="value-view">{{ deviceInfo.use_count }}次</view>
      </view>
      <view class="hor-layout-center card-item">
        <view>创建时间：</view>
        <view class="value-view">{{ deviceInfo.create_time }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {http} from "../../utils/request";

export default {
  name: "mine",
  data() {
    return {
      systemInfo: {},
      deviceInfo: {}
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: res => {
        this.systemInfo = res
      }
    });
    this.getDeviceInfo()
  },
  methods: {
    getDeviceInfo() {
      let {deviceId, uniPlatform, osName, deviceModel, deviceType} = this.systemInfo
      http.get({url: '/openai/getDevice', data: {uuid: deviceId,}}).then(res => {
        this.deviceInfo = res.data
      })
    },
    copyText() {
      this.$tools.showCopyModal(`复制设备id：\n${this.systemInfo.deviceId}`, this.systemInfo.deviceId)
    }
  }
}
</script>

<style scoped>
page {
  padding: 15px;
}

.card-layout {
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #17ead9, #6078ea);
}

.value-view {
  color: #c647ab;
}

.card-item {
  margin-top: 10px;
}

.divider-line {
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-bottom: 1px solid #e1e1e1;
}
</style>
